<template>
	<view class="content">

		<view class="main">

			<view class="menu_name">运单号</view>
			<view class="et_wb_num">{{detail.order_sn}}</view>

			<view class="menu_name">上传时间</view>
			<view class="et_wb_num">{{timestampToYMDHM(detail.createtime)}}</view>

			<view style="display: none;" class="menu_name">详细描述</view>
			<view style="display: none;" class="et_desc">{{detail.describe}}</view>

			<view class="menu_name">
				回单照片
				<view style="font-size: 24rpx;color: #aaa;margin: 0 0 0 6rpx;font-weight: normal;">点击图片查看大图</view>
			</view>
			<view class="item_sel_img">
				<view v-for="(item,index) in img_list" class="sel_img_div">
					<image class="sel_img" :src="item" @click="onPreviewImg(index,img_list)"></image>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import { getUInfo, isEmpty, timestampToYMDHM } from '@/util/util.js'
	import { chooseAndUploadImg, chooseAndUploadVideo } from '@/util/uni_util.js'
	export default {
		data() {
			return {
				detail: {},
				img_list: [], // 上报的图片列表
			}
		},

		onLoad(opts) {
			this.detail = JSON.parse(uni.getStorageSync('hd_detail'))
			if (this.detail) {
				this.detail.img && (this.img_list = this.detail.img.split(','))
				this.detail.oa_img && (this.img_list_oa = this.detail.oa_img.split(','))
			}
		},

		methods: {

			// 预览照片
			onPreviewImg(current, data_list) {
				uni.previewImage({
					current,
					urls: data_list,
					success: (res) => {},
					fail: (res) => {
						uni.showToast({ icon: 'none', title: '查看图片失败' })
					}
				})
			},

			timestampToYMDHM(ts) {
				return timestampToYMDHM(1000 * ts, '-', ':')
			},

		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		position: relative;
		min-height: 100vh;
		background-color: #6974DD;
		/* background-color: #f0f0f0; */
	}

	.main {
		display: flex;
		flex-direction: column;
		margin: 24rpx;
		background-color: white;
		border-radius: 24rpx;
		padding: 24rpx;
	}

	.menu_name {
		font-weight: bold;
		margin: 36rpx 0 0 0;
		display: flex;
		align-items: center;
	}

	.sub_menu_name {
		margin: 12rpx 0 0 0;
	}

	.et_wb_num {
		flex-grow: 1;
		color: #888;
		height: 56rpx;
		line-height: 56rpx;
		margin: 24rpx 0 0 0;
		padding: 0 24rpx 0 24rpx;
	}

	.btn_wb {
		width: 25%;
		height: 76rpx;
		line-height: 76rpx;
		color: white;
		text-align: center;
		font-size: 28rpx;
		margin: 24rpx 0 0 0;
		border-radius: 12rpx;
		background: #6974DD;
		margin: 24rpx 0 0 12rpx;
	}

	.et_desc {
		width: calc(100% - 48rpx);
		color: #888;
		padding: 24rpx;
	}

	/* 选择异常原因 */
	.yc_reason {
		display: flex;
		justify-content: space-between;
		color: #888;
		height: 56rpx;
		line-height: 56rpx;
		margin: 24rpx 0 0 0;
		padding: 0 24rpx 0 24rpx;
	}

	.item_sel_img {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		margin: 12rpx 0 12rpx 0;
	}

	.sel_img_div {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 选择的照片 */
	.sel_img {
		width: 132rpx;
		height: 132rpx;
		margin: 16rpx 0 0 16rpx;
		border: solid 1rpx #999;
		border-radius: 12rpx;
		/* padding: 1rpx; */
	}

	.sel_img_del {
		padding: 6rpx;
		color: orangered;
		margin: 0 0 0 16rpx;
	}

	.btn_sel_media {
		width: 300rpx;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 28rpx;
	}

	.tag_1 {
		font-size: 20rpx;
		color: #AC731D;
		background: #FEF9C3;
		width: 90rpx;
		text-align: center;
		margin: 24rpx 0 0 24rpx;
	}

	.tag_2 {
		font-size: 20rpx;
		color: #298C4E;
		background: #DCFCE7;
		width: 90rpx;
		text-align: center;
		margin: 24rpx 0 0 24rpx;
	}

	.tag_3 {
		font-size: 20rpx;
		color: #C23636;
		background: #FEE2E2;
		width: 90rpx;
		text-align: center;
		margin: 24rpx 0 0 24rpx;
	}

	.btn_ok {
		height: 88rpx;
		line-height: 88rpx;
		color: white;
		text-align: center;
		font-size: 30rpx;
		margin: 60rpx 0 0 0;
		border-radius: 888rpx;
		background: #6974DD;
	}

	/* pop弹窗样式 */
	.pop_div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 75vw;
		/* height: 48vh; */
		background-color: white;
		/* border-radius: 20rpx; */
	}
</style>